<script setup lang="ts">
import type { AIChatParams } from '@/services/ai'

const props = defineProps<{ form: AIChatParams }>()
const emit = defineEmits<{
  update: [params: Partial<AIChatParams>]
  close: []
}>()

const updateForm = (key: keyof AIChatParams, value: any) => {
  emit('update', { [key]: value })
}

const closePanel = () => {
  emit('close')
}
</script>

<template>
  <div class="ai-panel">
    <!-- 面板头部 -->
    <div class="panel-header">
      <span class="panel-title">AI 参数设置</span>
      <van-icon name="cross" size="18" @click="closePanel" class="close-btn" />
    </div>

    <van-cell title="查询模式" class="mode-cell">
      <template #value>
        <van-radio-group
          :model-value="props.form.mode"
          @update:model-value="updateForm('mode', $event)"
          direction="vertical"
        >
          <van-radio name="naive">
            <template #default>naive</template>
          </van-radio>
          <van-radio name="local">
            <template #default>local</template>
          </van-radio>
          <van-radio name="global">
            <template #default>global</template>
          </van-radio>
          <van-radio name="hybrid">
            <template #default>hybrid</template>
          </van-radio>
        </van-radio-group>
      </template>
    </van-cell>

    <van-cell title="TopK">
      <template #value>
        <van-stepper
          :model-value="props.form.top_k"
          @update:model-value="updateForm('top_k', $event)"
          min="1"
          max="20"
          integer
        />
      </template>
    </van-cell>

    <van-cell title="文本Token">
      <template #value>
        <van-stepper
          :model-value="props.form.max_token_for_text_unit"
          @update:model-value="updateForm('max_token_for_text_unit', $event)"
          step="500"
          min="500"
          max="8000"
          integer
        />
      </template>
    </van-cell>

    <van-cell title="全局Token">
      <template #value>
        <van-stepper
          :model-value="props.form.max_token_for_global_context"
          @update:model-value="
            updateForm('max_token_for_global_context', $event)
          "
          step="500"
          min="500"
          max="8000"
          integer
        />
      </template>
    </van-cell>

    <van-cell title="本地Token">
      <template #value>
        <van-stepper
          :model-value="props.form.max_token_for_local_context"
          @update:model-value="
            updateForm('max_token_for_local_context', $event)
          "
          step="500"
          min="500"
          max="8000"
          integer
        />
      </template>
    </van-cell>

    <van-cell title="历史轮次">
      <template #value>
        <van-stepper
          :model-value="props.form.history_turns"
          @update:model-value="updateForm('history_turns', $event)"
          min="0"
          max="10"
          integer
        />
      </template>
    </van-cell>

    <van-cell title="仅需上下文">
      <template #value>
        <van-switch
          :model-value="props.form.only_need_context"
          @update:model-value="updateForm('only_need_context', $event)"
          size="18"
        />
      </template>
    </van-cell>

    <van-cell title="仅需提示词">
      <template #value>
        <van-switch
          :model-value="props.form.only_need_prompt"
          @update:model-value="updateForm('only_need_prompt', $event)"
          size="18"
        />
      </template>
    </van-cell>
  </div>
</template>

<style lang="scss" scoped>
.ai-panel {
  position: fixed;
  top: 90px;
  right: 0;
  bottom: 120px;
  width: 300px;
  max-width: 85vw;
  padding: 16px 12px;
  overflow-y: auto;
  border: 1px solid var(--cp-line);
  background: #fff;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  border-radius: 12px 0 0 12px;

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 16px 0;
    border-bottom: 1px solid var(--cp-line);
    margin-bottom: 16px;

    .panel-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--cp-text1);
    }

    .close-btn {
      color: var(--cp-text2);
      cursor: pointer;
      transition: color 0.3s ease;

      &:hover {
        color: var(--cp-primary);
      }
    }
  }

  :deep(.van-cell) {
    padding: 12px 0;
    border-bottom: 1px solid var(--cp-line);

    &:last-child {
      border-bottom: none;
    }

    .van-cell__title {
      font-size: 14px;
      color: var(--cp-text1);
      font-weight: 500;
    }
  }

  :deep(.van-cell__value) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .mode-cell {
    :deep(.van-cell__value) {
      flex: 1;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .van-radio-group {
      display: flex;
      flex-direction: column;
      width: 100%;

      .van-radio {
        margin-bottom: 8px;

        &__label {
          font-size: 14px;
          color: var(--cp-text1);
          width: 100%;
          white-space: normal;
          line-height: 1.3;
        }
      }
    }
  }

  :deep(.van-stepper) {
    .van-stepper__input {
      width: 60px;
      font-size: 14px;
    }

    .van-stepper__minus,
    .van-stepper__plus {
      width: 24px;
      height: 24px;
    }
  }

  :deep(.van-switch) {
    transform: scale(0.9);
  }
}
</style>
